<template>
	<view class="example-container">
		<u-popup v-model="popShowFlag" mode="bottom" border-radius="14" :duration="300"
				 :height="(innerWindowHeight)+'px'" :mask-close-able="false">
				 <view style="padding-top:10%;background-color: #303133;height: 100%;">
					<view class="u-p-30 u-flex u-row-between u-col-center u-border-bottom">
						<view  @click="closePopUp()" style="width: 30%;">
							<u-icon name="close" size="34" color="#ffffff"></u-icon>
						</view> 
						<view style="font-size: 34rpx;font-weight: bold;color: #ffffff;text-align: center;">使用示例</view>
						<view @click="changeList()" style="width: 30%;text-align: right;"> 
							<text style="color: #2b85e4;">换一批</text>		 
						 </view>
					</view>
					<view class="u-p-20 u-flex u-row-center u-col-center">
						<u-search placeholder="请输入关键字" v-model="searchWord" 
								@search="search"
								shape="square" :show-action="false"></u-search>
					</view>
					<template v-if="exampleList.length>0">
						<scroll-view  :scroll-y="true" :scroll-x="false" 
									  @touchmove.stop
									  @scrolltolower="loadMore"
									  class="hidden-scroll-bar"   style="height: 85%;">
							<view 	style="width: 100%;padding:20rpx;"
									v-for="(example,index) in exampleList" :key="index">
								<view @click="toQuestion(example)" 
									 style="background-color: #2b85e4;color: #ffffff;border-radius: 16rpx;"
									  class="u-flex u-row-between u-col-center u-p-20">
									<view>
										<view style="font-weight: bold;font-size: 34rpx;">{{example.title}}</view> 
										<view class="u-line-5 u-p-20">{{example.content}}</view>
									</view>
									<view>
										<u-icon name="arrow-right" color="#ffffff"></u-icon>
									</view>	
								</view>
							</view>
						</scroll-view>
					</template>
				 </view>	
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			showFlag:{
				type: Boolean,
				default:false,
			}
		},
		data() {
			return {
				popShowFlag:false,
				innerWindowHeight:0,
				scrollViewHeight:0,
				exampleList:[],
				pageNum:1,
				pageSize:10,
				totalCount:0,
				totalPage:100,
				searchWord:'',
			};
		},
		mounted:function(option){
			let that=this;
			let pageHeight= this.$u.sys().windowHeight;
			this.innerWindowHeight =pageHeight;
			this.scrollViewHeight =pageHeight * 0.8;
			this.popShowFlag=this.showFlag;
			this.pageNum=1;
			this.reloadExampleList();
		},

		methods:{
			reloadExampleList:function(){
				let that=this;
				let param={
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					keyWord:that.searchWord,
				};
				this.$u.api.chatgpt.reloadExampleList(param).then(res => {
					if(res.code==200){
						//console.log("提问模板",res);
						that.exampleList= res.data.list;
						that.totalCount=res.data.total;
						that.totalPage=res.data.totalPage;
						that.pageNum++;
					}
				});		
			},
			search(){
				let that=this;
				that.pageNum=1;
				that.reloadExampleList();
			},
			changeList:function(){
				let that=this;
				that.pageNum= that.globalUtil.randomNum(1,that.totalPage);
				console.log("刷新页码",that.pageNum);
				that.reloadExampleList();
			},
			loadMore(){
				let that=this;
				if(that.pageNum>=that.totalPage){
					that.globalUtil.utilAlert("暂无更多");
					return;
				};
				let param={
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					keyWord:that.searchWord,
				};
				this.$u.api.chatgpt.reloadExampleList(param).then(res => {
					if(res.code==200){
						//console.log("提问模板",res);
						that.exampleList=that.exampleList.concat(res.data.list);
						that.totalCount=res.data.total;
						that.pageNum++;
					}
				});		
			},
			
			toQuestion:function(item){
				let that=this;
				that.popShowFlag=false;
				that.$emit("exampleToAnswer",item);
			},
			
			closePopUp:function(){
				let that=this;
				console.log("关闭")
				this.popShowFlag=false;
				setTimeout(function(){
					that.$emit("closeRecordPop",false);
				},200)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.example-container{
		color: #606266;
	}
</style>

